<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发布商品</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

</head>

<body>
    <div class="app-wrap" v-cloak id="add_Goods">
        <header-top></header-top>
        <header-search-global type="首页"></header-search-global>
        <common-top-nav></common-top-nav>
        <!-- 用于更新的数据，勿删 -->
        <div v-show="0">{{changeViewData.data}}</div>
        <div class="bg-gray">
            <div class="container userCenter clear">
                <leftnav navtext="发布商品"></leftnav>
                <div class="user-content" style="padding:10px 0;">
                    <div class="add_Goods">
                        <div class="add_Goods_steps">
                            <div :class="{steps_item: true,'active': active >= index}" v-for="(item,index) in steps_items">
                                <div class="circle">{{item.id}}</div>
                                <p>{{item.title}}</p>
                            </div>
                        </div>
                        <div class="add_Goods_con">
                            <!--第一步-->
                            <div class="add_tabs tabs1" v-show="active === 0">
                                <span class="choose"> 选择商品类目：</span>
                                <el-select v-model="options1Index" @change="chooseOptions1(options1Index)">
                                    <el-option v-for="item,index in options1" :key="item.id" :label="item.name" :value="index">
                                    </el-option>
                                </el-select>
                                <el-select v-model="options2Index" @change="chooseOptions2(options2Index)">
                                    <el-option v-for="item,index in options2" :key="item.id" :label="item.name" :value="index">
                                    </el-option>
                                </el-select>
                                <el-select v-model="options3Index">
                                    <el-option v-for="item,index in options3" :key="item.id" :label="item.name" :value="index">
                                    </el-option>
                                </el-select>
                                <div class="bottom">
                                    <span>当前商品类目：</span> {{!(options1Index==='')?options1[options1Index].name:''}}
                                    <i class="icon-arr-right" v-show="!(options1Index==='')"></i> {{!(options2Index==='')?options2[options2Index].name:''}}
                                    <i class="icon-arr-right" v-show="!(options2Index==='')"></i> {{!(options3Index==='')?options3[options3Index].name:''}}
                                </div>
                            </div>

                            <el-form label-width="130px">
                                <!--第二步-->
                                <div class="add_tabs tabs2" v-show="active === 1">
                                    <div class="top_panel">
                                        <span>当前商品类目：</span> {{!(options1Index==='')?options1[options1Index].name:''}}
                                        <i class="icon-arr-right" v-show="!(options1Index==='')"></i> {{!(options2Index==='')?options2[options2Index].name:''}}
                                        <i class="icon-arr-right" v-show="!(options2Index==='')"></i> {{!(options3Index==='')?options3[options3Index].name:''}}
                                    </div>
                                    <h1 class="title">商品基本信息</h1>
                                    <div class="form-content">
                                        <el-form-item label="商品名称：">
                                            <el-input style="width: 400px;" v-model="ajaxUpData.goodsName"></el-input>
                                        </el-form-item>
                                        <el-form-item label="商品编号：">
                                            <el-input style="width: 400px;" v-model="ajaxUpData.goodsNumber"></el-input>
                                        </el-form-item>
                                        <el-form-item label="店铺中分类：">
                                            <el-select style="width: 120px;margin-right: 10px;" v-model="ruleForm.region1" placeholder="请选择" @change="chooseOptions4(ruleForm.region1)">
                                                <el-option v-for="item,index in options4" :key="item.id" :label="item.name" :value="index">
                                                </el-option>
                                            </el-select>
                                            <el-select style="width: 120px;" v-model="ajaxUpData.categoryId" placeholder="请选择">
                                                <el-option v-for="item,index in options5" :key="item.id" :label="item.name" :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="商品卖点：">
                                            <el-input type="textarea" v-model="ajaxUpData.introduce"></el-input>
                                            <p>商品卖点不在无线商品详情页展示</p>
                                        </el-form-item>
                                    </div>
                                    <h1 class="title">商品属性</h1>
                                    <div class="form-content">
                                        <div class="info">
                                            <i class="icon-pinpai_entry_review_warn"></i>错误填写商品属性，可能会引起商品下架或搜索流量减少，影像您的正常销售，请认真准确填写！
                                        </div>
                                        <div class="form_item">
                                            <label>品牌：</label>
                                            <el-select v-model="ajaxUpData.brandId" placeholder="商家代理的品牌名称">
                                                <el-option v-for="item in majorInformation.brandList" :key="item.id" :label="item.brandName" :value="item.id">
                                                </el-option>
                                            </el-select>
                                        </div>
                                        <div class="form_item" v-for="(item,index) in majorInformation.goodsGroupList">
                                            <label>{{item.specName}}：</label>
                                            <el-select v-model="goodsProperty[index]">
                                                <el-option v-for="(attrs,subindex) in item.goodsAttributeValueList" :label="attrs.valueName" :key="attrs.id" :value="subindex"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <h1 class="title">商品规格</h1>
                                    <div class="form-content">
                                        <h3 style="margin-top:10px;">颜色</h3>
                                        <div class="checkBox_con">
                                            <el-radio v-model="colorRadio" :label="index" :key="item.specValue" v-for="(item,index) in majorInformation.color.goodsSpecValueList">{{item.specValue}}</el-radio>
                                            <!--<button class="add_color"><i class="el-icon-plus"></i>添加</button>-->
                                        </div>
                                        <h3 style="margin-top:20px;">尺码</h3>
                                        <div class="checkBox_con" v-for="(item,index) in majorInformation.color.goodsSpecValueList" v-show="colorRadio==index">
                                            <el-checkbox-group v-model="sizeList[index]">
                                                <el-checkbox v-for="(subitem,subindex) in majorInformation.size.goodsSpecValueList" :label="subindex" :key="subitem.specValue" @change="chooseSize">{{subitem.specValue}}</el-checkbox>
                                            </el-checkbox-group>
                                            <!--<button class="add_color"><i class="el-icon-plus"></i>添加</button>-->
                                        </div>
                                        <h3 style="margin-top:20px;">商品销售规格</h3>
                                        <!-- <div class="info_tips">可批量添加商品价格以及库存数量，库存为0的商品规格，在商品详情页不展示</div> -->
                                        <div class="checkBox_con">
                                            <div class="picker">
                                                <!-- 批量填充 -->
                                                <span>基础信息：</span>
                                                <el-input v-model="ajaxUpData.goodsPrice" placeholder="基础价" @blur="blurInputPrice"></el-input>
                                                <el-input v-model="name" placeholder="商家编码"></el-input>
                                                <el-input v-model="name" placeholder="商品条形码"></el-input>
                                                <!-- <button class="btn" type="button">确定</button> -->
                                            </div>
                                            <table class="picker_table">
                                                <tr>
                                                    <td>颜色</td>
                                                    <td>尺码</td>
                                                    <td>库存 ( 件 )</td>
                                                </tr>
                                                <!-- 这里 subitem 是尺码数组对应的下标 -->
                                                <template v-for="(item,index) in sizeList" v-if="item.length">
                                                    <tr v-for="subitem,subindex in item">
                                                        <td :rowspan="item.length" v-if="subindex==0">{{majorInformation.color.goodsSpecValueList[index].specValue}}</td>
                                                        <td>{{majorInformation.size.goodsSpecValueList[subitem].specValue}}</td>
                                                        <td>
                                                            <input type="text" placeholder="请输入数量" v-model="amountList[index][subitem]" @blur="blurInput(amountList,index,subitem)">
                                                        </td>
                                                    </tr>
                                                </template>
                                            </table>
                                        </div>
                                        <h3 style="margin-top:20px;">商品销售规格</h3>
                                        <div class="picker_con">
                                            <table class="picker_table">
                                                <tr>
                                                    <td class="price"><i></i>价格 ( 元 )</td>
                                                    <td class="number"><i></i>库存总数 ( 件 )</td>
                                                    <td>商家编码</td>
                                                    <td>商品条形码</td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <!-- <input type="text" value="35.00"> -->
                                                        {{ajaxUpData.goodsPrice}}
                                                    </td>
                                                    <td>
                                                        <!-- <input type="texe" value="1680"> -->
                                                        {{goodsTotalNum}}
                                                    </td>
                                                    <td>
                                                        <!-- <input type="texe" value="201802081122"> -->
                                                    </td>
                                                    <td>
                                                        <!-- <input type="text" value="2018020811221122"> -->
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <h3 style="margin-top:20px;"><i></i>销售商品价格区间设置</h3>
                                        <div class="original">
                                            <div class="item">起订量<input type="text" v-model="ajaxUpData.goodsBteList[0].minNum">件及以上：<input type="text" v-model="ajaxUpData.goodsBteList[0].unitPrice">元/件</div>
                                            <button class="original_btn" type="button" @click="addGoodsBteList">添加价格区间</button>
                                            <!-- 从第二个开始显示 -->
                                            <div v-for="item,index in ajaxUpData.goodsBteList" v-if="index>0">
                                                <div class="item">价格区间<input type="text" v-model="item.minNum">件及以上：<input type="text" v-model="item.unitPrice">元/件</div>
                                                <button class="original_del" type="button" @click="delGoodsBteList(index)">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                    <h1 class="title">商品描述</h1>
                                    <div class="form-content textarea">
                                        <el-input type="textarea" placeholder="请输入商品描述" v-model="ajaxUpData.describe"></el-input>
                                        <!-- <span>最多可输入30000字</span> -->
                                    </div>
                                    <!-- <h1 class="title">商品物流信息</h1>
                                    <div class="form-content textarea">
                                        <div class="form_group">
                                            <label class="form_label">商品所在地：</label>
                                            <el-select v-model="name">
                                                <el-option label="北京" value="a"></el-option>
                                                <el-option label="上海" value="b"></el-option>
                                            </el-select>
                                            <el-select v-model="name">
                                                <el-option label="北京" value="a"></el-option>
                                                <el-option label="上海" value="b"></el-option>
                                            </el-select>
                                        </div>
                                        <div class="form_group form_group_input" style="margin-bottom: 10px;">
                                            <label class="form_label">运费：</label>
                                            <el-input v-model="name"></el-input>
                                        </div>
                                        <div class="form_group">
                                            <label class="form_label"></label>
                                            <span class="col-gray">0.00元则该商品免运费</span>
                                        </div>
                                    </div> -->
                                    <h1 class="title">商品发布信息</h1>
                                    <div class="form-content textarea">
                                        <div class="form_group">
                                            <label class="form_label">是否开增值税发票：</label>
                                            <el-radio v-model="ajaxUpData.ifInvoice" :label="1">是</el-radio>
                                            <el-radio v-model="ajaxUpData.ifInvoice" :label="0">否</el-radio>
                                        </div>
                                    </div>
                                    <!-- <h1 class="title">商品基础保障</h1>
                                    <div class="form-content textarea">
                                        <el-checkbox-group v-model="ajaxUpData.basicGuarantee">
                                            <div class="form_group" style="margin-bottom: 0;">
                                                <el-checkbox :label="0">
                                                    <p>正品保证</p>
                                                    <p>该商品由中国人保承保正品保证险</p>
                                                </el-checkbox>
                                            </div>
                                            <div class="form_group" style="margin-bottom: 0;">
                                                <el-checkbox :label="1">
                                                    <p>极速退款</p>
                                                    <p>极速退款是为诚信会员提供的退款退货流程的专享特权</p>
                                                </el-checkbox>
                                            </div>
                                            <div class="form_group" style="margin-bottom: 0;">
                                                <el-checkbox :label="2">
                                                    <p>七天无理由退货</p>
                                                    <p>消费者在满足七天无理由退货申请条件的前提下，可以提出“七天无理由退货”的申请</p>
                                                </el-checkbox>
                                            </div>
                                        </el-checkbox-group>
                                    </div> -->
                                    <h1 class="title">商品发布信息</h1>
                                    <div class="form-content textarea" style="border-bottom:0 none;">
                                        <div class="form_group">
                                            <label class="form_label">上架时间：</label>
                                            <el-radio v-model="radio" label="1">立即上架</el-radio>
                                            <el-radio v-model="radio" label="2">定时上架
                                                <el-date-picker style="margin-left: 10px;" v-model="value1" type="datetime" placeholder="选择日期时间">
                                                </el-date-picker>
                                            </el-radio>
                                            <el-radio v-model="radio" label="3">放入待上架商品列表</el-radio>
                                        </div>
                                    </div>
                                </div>
                                <!--第三步-->
                                <div class="add_tabs tabs3" v-show="active === 2">
                                    <h1>商品主图</h1>
                                    <div class="uploads">
                                        <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <span>主图</span>
                                        </el-upload>
                                        <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <span>细节图</span>
                                        </el-upload>
                                        <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <span>细节图</span>
                                        </el-upload>
                                        <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <span>细节图</span>
                                        </el-upload>
                                        <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            <span>细节图</span>
                                        </el-upload>
                                        <p>主图规格：800*800</p>
                                    </div>
                                    <h1>主图视频</h1>
                                    <div class="uploads">
                                        <i class="icon-pinpai_entry_review_warn"></i>
                                        <div class="warning">
                                            <p>1.主图视频可在手机端和电脑端同时展现。</p>
                                            <p> 2.时长：
                                                <=60秒，建议9 - 30秒；</p>
                                                    <p>3.尺寸：建议1:1；</p>
                                                    <p>4.内容：突出商品1-2个核心卖点,不建议电子相册式的图片翻页视频</p>
                                        </div>
                                        <div class="upload_video">
                                            <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                <span>主图视频</span>
                                            </el-upload>
                                        </div>
                                    </div>
                                    <h1>商品长图</h1>
                                    <div class="uploads">
                                        <i class="icon-pinpai_entry_review_warn"></i>
                                        <div class="warning">
                                            <p>长图横竖比必须是2:3，最小长度为480，建议使用800*1200，若不上传长图，搜索列表、市场活动等页面的竖图模式将无法展示</p>
                                        </div>
                                        <div class="upload_video">
                                            <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                <span>商品长图</span>
                                            </el-upload>
                                        </div>
                                    </div>
                                    <h1>商品颜色 配图</h1>
                                    <div class="uploads" style="border-bottom:0 none;">
                                        <div class="upload_con">
                                            <div class="uploads_title">
                                                <i class="bg_red"></i>红色
                                            </div>
                                            <div class="uploads_item">
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>主图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <p>主图规格：800*800</p>
                                            </div>
                                        </div>
                                        <div class="upload_con">
                                            <div class="uploads_title">
                                                <i class="bg_blue"></i>蓝色
                                            </div>
                                            <div class="uploads_item">
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>主图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <el-upload class="avatar-uploader" action="" :show-file-list="false">
                                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                                    <span>细节图</span>
                                                </el-upload>
                                                <p>主图规格：800*800</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-form>

                            <div class="button clear">
                                <el-button v-show="active === 0" @click="next">下一步,填写商品信息
                                    <i>&gt;</i>
                                </el-button>

                                <div class="btn-group" v-show="active === 1">
                                    <el-button @click="prev">
                                        <i style="margin-right: 10x;">&lt;</i>上一步
                                    </el-button>
                                    <el-button @click="next">下一步,上传商品图片信息
                                        <i>&gt;</i>
                                    </el-button>
                                </div>

                                <div class="btn-group" v-show="active === 2">
                                    <el-button @click="prev">
                                        <i style="margin-right: 10x;">&lt;</i>上一步
                                    </el-button>
                                    <el-button>
                                        保存
                                    </el-button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <common-footer></common-footer>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        add_Goods();
    </script>
</body>

</html>